<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX</title>
<jsp:include page="/head.jsp"></jsp:include>
</head>
<body>
	<div id="box" ></div>
 <hr style="width:100%; clear:left;"/> 
	<button>发送同步请求</button>
	<button>发送异步请求</button>
	<button>发送同步请求十次</button>
	<button>发送异步请求十次</button>

	<script type="text/javascript">
		var box = document.body.firstElementChild;
		var btns = document.body.querySelectorAll("button");
		btns[0].addEventListener("click", function() {
			let
			xhr = new XMLHttpRequest();
			//xhr.readystate读取状态
			xhr.onreadystatechange = function() {
				/**
				0: 请求未初始化
				1: 服务器连接已建立
				2: 请求已接收
				3: 请求处理中
				4: 请求已完成，且响应已就绪
				 **/

				//xhr.status  响应状态码 404 500 200-成功
				//xhr.responseText
				console.info(xhr.readyState + ":" + xhr.status);
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.info(xhr.responseText);
					box.innerHTML += xhr.responseText;
				}
			}
			xhr.open("get","demo/inc.jsp?name=李明威",false);
			xhr.send();
			
		});
		
		btns[1].addEventListener("click", function() {
			let
			xhr = new XMLHttpRequest();
			//xhr.readystate读取状态
			xhr.onreadystatechange = function() {
				/**
				0: 请求未初始化
				1: 服务器连接已建立
				2: 请求已接收
				3: 请求处理中
				4: 请求已完成，且响应已就绪
				 **/

				//xhr.status  响应状态码 404 500 200-成功
				//xhr.responseText
				console.info(xhr.readyState + ":" + xhr.status);
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.info(xhr.responseText);
					box.innerHTML += xhr.responseText;
				}
			}
			xhr.open("get","demo/inc.jsp?name=李明威",true);
			xhr.send();
		});
		
		btns[2].addEventListener("click", function() {
			for(var i=0;i<10;i++){
			let xhr = new XMLHttpRequest();
			//xhr.readystate读取状态
			xhr.onreadystatechange = function() {
				/**
				0: 请求未初始化
				1: 服务器连接已建立
				2: 请求已接收
				3: 请求处理中
				4: 请求已完成，且响应已就绪
				 **/

				//xhr.status  响应状态码 404 500 200-成功
				//xhr.responseText
				console.info(xhr.readyState + ":" + xhr.status);
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.info(xhr.responseText);
					box.innerHTML += xhr.responseText;
				}
			}
			
			xhr.open("get","demo/inc.jsp?name="+i,false);
			xhr.send();
			}
		});
		btns[3].addEventListener("click", function() {
			for(var i=0;i<10;i++){
			let xhr = new XMLHttpRequest();
			//xhr.readystate读取状态
			xhr.onreadystatechange = function() {
				/**
				0: 请求未初始化
				1: 服务器连接已建立
				2: 请求已接收
				3: 请求处理中
				4: 请求已完成，且响应已就绪
				 **/

				//xhr.status  响应状态码 404 500 200-成功
				//xhr.responseText
				console.info(xhr.readyState + ":" + xhr.status);
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.info(xhr.responseText);
					box.innerHTML += xhr.responseText;
				}
			}
			
			xhr.open("get","demo/inc.jsp?name="+i,true);
			xhr.send();
			}
		});
		
	</script>


</body>
</html>